<template>  
<div v-show="visible">
<div class="contaoner">  
      <div class="title">
  <span class="title-cancle" @click="visible=false">X</span>
  </div>
<div class="from">
    <div class="form-item">
        <div class="label">文章ID</div>
        <input v-model="fromData.id">
    </div>
    <div class="form-item">
        <div class="label">文章标题</div>
        <input v-model="fromData.title">
    </div>
    <div class="form-item">
        <div class="label">文章标签</div>
        <input v-model="fromData.label">
    </div>
    <div class="form-item">
        <div class="label">作者</div>
        <input v-model="fromData.author">
    </div>
    </div>
    <div class="footer">
  <button class="title" @click="confirm">确定</button>
    </div> 
  </div>
  <div class="mask" @click="visible=false"></div>
  </div>
</template>

<script>
export default {
  data(){
      return{
          visible:false,
          fromData:{
              id:"",
              title:"",
              label:"",
              author:"",
          },
      };
  },
  methods:{
      confirm(){
          console.log(this.fromData);
          this.$emit("confirm",this.fromData);
          this.visible=false;
      },
      show(data=undefined){
          if(data){
              this.formData.id=data.id;
              this.formData.title=data.title;
              this.formData.label=data.label;
              this.formData.author=data.author;
          }
      }
  }

}
</script>

<style>
.contaoner{
    position: fixed;
    width: 400px;
    left: 50%;
    margin-left: -200px;
    height: 400px;
    top: 20%;
    border: 1px solid #ccc;
    z-index: 11;
}
.title{
    height: 50px;
    line-height: 50px;
    background: #001528;
    color: #fff;
    text-align: right;
}
.title-cancle{
    margin-right: 10px;
    cursor: pointer;
}
.from{
    padding: 20px;
}

.from-item{
    display: flex;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
}
.lab{
    width: 200px;
}
.footer{
    text-align: right;
    padding: 10px;
}
.mask{
    position:fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ccc;
    opacity: 0.5;
    z-index: 10;
}
</style>